<template>
	<el-drawer title="恢复列表" size="480px" :visible.sync="drawer" custom-class="backup_recover_drawer">
		<div class="backup_recover_wrapper">
			<template v-if="recoverData.length > 0">
				<dl v-for="(item, index) in recoverData" :key="index" :class="item.status | statusClass">
					<dt>{{ item.name }}</dt>
					<dd>IP地址：{{ item.ipAddr }}</dd>
					<dd>恢复人：{{ item.createName }}</dd>
					<dd>恢复时间：{{ item.createTime }}</dd>
					<dd>备份文件：{{ item.fileUrl }}</dd>
				</dl>
			</template>
			<template v-else>
				<el-empty></el-empty>
			</template>
		</div>
	</el-drawer>
</template>

<script>
import { getRecoverList } from '@/api/system/tbSysRecover';
export default {
	props: {
		value: Boolean,
		backupId: String
	},
	data() {
		return {
			loading: false,
			drawer: this.value,
			recoverData: []
		};
	},
	watch: {
		value(flag) {
			this.drawer = flag;
		},
		drawer(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.getRecoverData();
		}
	},
	filters: {
		statusClass(input) {
			let className = '';
			if (input === '1') {
				className = 'success';
			} else if (input === '2') {
				className = 'failure';
			}
			return className;
		}
	},
	methods: {
		//获取恢复列表
		async getRecoverData() {
			let result = await getRecoverList(this.backupId).then((res) => res.data);
			if (result.code === '0') {
				this.recoverData = !result.data ? [] : result.data;
			}
		}
	}
};
</script>

<style lang="scss">
.backup_recover_drawer {
	.el-drawer__header {
		padding: 16px;
		margin: 0;
		border-bottom: solid 1px #dcdfe6;
		span {
			font-size: 16px;
			font-weight: bold;
		}
	}
}
</style>
<style lang="scss" scoped>
.backup_recover_wrapper {
	height: 100%;
	padding: 16px;
	overflow: auto;
	dl {
		position: relative;
		padding: 16px;
		border-radius: 4px;
		border: solid 1px #f1f2f3;
		overflow: hidden;
		margin-top: 16px;
		&:first-child {
			margin-top: 0;
		}
		&::before {
			position: absolute;
			top: -32px;
			right: -32px;
			width: 64px;
			height: 64px;
			content: '';
			color: #fff;
			text-align: center;
			line-height: 106px;
			font-size: 14px;
			overflow: hidden;
			transform: rotate(45deg);
		}
		&.success {
			border-color: #67c23a;
		}
		&.failure {
			border-color: #f56c6c;
		}
		&.success::before {
			content: '成功';
			background-color: #67c23a;
		}
		&.failure::before {
			content: '失败';
			background-color: #f56c6c;
		}
	}
	dt {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	dd {
		color: #666;
		line-height: 24px;
		word-break: break-all;
	}
	.el-empty {
		width: 160px;
	}
}
</style>
